<template>
    <div :style='{"border":"1px solid #eee","padding":"20px","boxShadow":"0px 0px 0px #ccc,inset 0px 0px 0px 0px #eee","margin":"20px auto 0","borderRadius":"4px","background":"#fff","width":"1200px","position":"relative"}'>
        <el-form
                class="add-update-preview"
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="80px"
        >
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="线路名称" prop="linename">
                <el-input v-model="ruleForm.linename"
                          placeholder="线路名称" clearable></el-input>
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="线路图片" v-if="type!='cross' || (type=='cross' && !ro.lineimage)" prop="lineimage">
                <file-upload
                        tip="点击上传线路图片"
                        action="file/upload"
                        :limit="3"
                        :multiple="true"
                        :fileUrls="ruleForm.lineimage?ruleForm.lineimage:''"
                        @change="lineimageUploadChange"
                ></file-upload>
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    class="upload" v-else label="线路图片" prop="lineimage">
                <img v-if="ruleForm.lineimage.substring(0,4)=='http'" class="upload-img" style="margin-right:20px;"
                     v-bind:key="index" :src="ruleForm.lineimage.split(',')[0]" width="100" height="100">
                <img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index"
                     v-for="(item,index) in ruleForm.lineimage.split(',')" :src="baseUrl+item" width="100" height="100">
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="线路类型" prop="routetype">
                <el-select v-model="ruleForm.routetype" placeholder="请选择线路类型">
                    <el-option
                            v-for="(item,index) in routetypeOptions"
                            :key="index"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="出发地" prop="departureplace">
                <el-input v-model="ruleForm.departureplace"
                          placeholder="出发地" clearable></el-input>
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="目的地" prop="destination">
                <el-input v-model="ruleForm.destination"
                          placeholder="目的地" clearable></el-input>
            </el-form-item>


            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="出行时间" prop="traveltime">
                <el-select v-model="ruleForm.traveltime" placeholder="请选择出行时间">
                    <el-option
                            v-for="(item,index) in traveltimeOptions"
                            :key="index"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="出行天数" prop="traveldays">
                <el-select v-model="ruleForm.traveldays" placeholder="请选择出行天数">
                    <el-option
                            v-for="(item,index) in traveldaysOptions"
                            :key="index"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="交通工具" prop="transportation">
                <el-select v-model="ruleForm.transportation" placeholder="请选择交通工具">
                    <el-option
                            v-for="(item,index) in transportationOptions"
                            :key="index"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="途径景点" prop="routeattraction">
                <el-select v-model="ruleForm.routeattraction" placeholder="请选择途径景点" multiple>
                    <el-option
                            v-for="(item,index) in routeattractionOptions"
                            :key="index"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="发布日期" prop="releasedate">
                <el-date-picker
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        v-model="ruleForm.releasedate"
                        type="date"
                        placeholder="发布日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item
                    :style='{"border":"0px solid #dfdfdf","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 8px 0","borderRadius":"8px","background":"none"}'
                    label="详情" prop="details">
                <editor
                        :style='{"minHeight":"200px","padding":"0","margin":"0","borderColor":"#ccc","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'
                        v-model="ruleForm.details"
                        class="editor"
                        action="file/upload">
                </editor>
            </el-form-item>

            <el-form-item :style='{"padding":"0","margin":"20px 0 20px 0"}'>
                <el-button
                        :style='{"border":"0","cursor":"pointer","padding":"0","boxShadow":"1px 2px 4px #ccc","margin":"0 20px 0 0","color":"#fff","outline":"none","borderRadius":"20px","background":"radial-gradient(circle, rgba(43,224,232,1) 0%, rgba(0,173,181,1) 100%)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                        type="primary" @click="onSubmit">提交
                </el-button>
                <el-button
                        :style='{"border":"1px solid #bbb","cursor":"pointer","padding":"0","boxShadow":"4px 4px 8px #eee","margin":"0","color":"#999","outline":"none","borderRadius":"20px","background":"#fff","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                        @click="back()">返回
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id: '',
                baseUrl: '',
                ro: {
                    linename: false,
                    lineimage: false,
                    routetype: false,
                    departureplace: false,
                    destination: false,
                    traveltime: false,
                    traveldays: false,
                    transportation: false,
                    routeattraction: false,
                    details: false,
                    releasedate: false,
                },
                type: '',
                userTableName: localStorage.getItem('UserTableName'),
                ruleForm: {
                    linename: '',
                    lineimage: '',
                    routetype: '',
                    departureplace: '',
                    destination: '',
                    traveltime: '',
                    traveldays: '',
                    transportation: '',
                    routeattraction: '',
                    details: '',
                    releasedate: '',
                },
                routetypeOptions: [],
                traveltimeOptions: [],
                traveldaysOptions: [],
                transportationOptions: [],
                routeattractionOptions: [],
                rules: {
                    linename: [
                        {required: true, message: '线路名称不能为空', trigger: 'blur'},
                    ],
                    lineimage: [],
                    routetype: [
                        {required: true, message: '线路类型不能为空', trigger: 'blur'},
                    ],
                    departureplace: [],
                    destination: [],
                    traveltime: [
                        {required: true, message: '出行时间不能为空', trigger: 'blur'},
                    ],
                    traveldays: [
                        {required: true, message: '出行天数不能为空', trigger: 'blur'},
                    ],
                    transportation: [],
                    routeattraction: [],
                    details: [],
                    releasedate: [],
                },
            };
        },
        computed: {},
        created() {
            //this.bg();
            let type = this.$route.query.type ? this.$route.query.type : '';
            this.init(type);
            this.baseUrl = this.$config.baseUrl;
            this.ruleForm.releasedate = this.getCurDate()
        },
        methods: {
            getMakeZero(s) {
                return s < 10 ? '0' + s : s;
            },
            // 下载
            download(file) {
                window.open(`${file}`)
            },
            // 初始化
            init(type) {
                this.type = type;
                if (type == 'cross') {
                    var obj = JSON.parse(localStorage.getItem('crossObj'));
                    for (var o in obj) {
                        if (o == 'linename') {
                            this.ruleForm.linename = obj[o];
                            this.ro.linename = true;
                            continue;
                        }

                        if (o == 'lineimage') {
                            this.ruleForm.lineimage = obj[o].split(",")[0];
                            this.ro.lineimage = true;
                            continue;
                        }
                        if (o == 'routetype') {
                            this.ruleForm.routetype = obj[o];
                            this.ro.routetype = true;
                            continue;
                        }
                        if (o == 'departureplace') {
                            this.ruleForm.departureplace = obj[o];
                            this.ro.departureplace = true;
                            continue;
                        }
                        if (o == 'destination') {
                            this.ruleForm.destination = obj[o];
                            this.ro.destination = true;
                            continue;
                        }
                        if (o == 'traveltime') {
                            this.ruleForm.traveltime = obj[o];
                            this.ro.traveltime = true;
                            continue;
                        }
                        if (o == 'traveldays') {
                            this.ruleForm.traveldays = obj[o];
                            this.ro.traveldays = true;
                            continue;
                        }
                        if (o == 'transportation') {
                            this.ruleForm.transportation = obj[o];
                            this.ro.transportation = true;
                            continue;
                        }
                        if (o == 'routeattraction') {
                            this.ruleForm.routeattraction = obj[o];
                            this.ro.routeattraction = true;
                            continue;
                        }
                        if (o == 'details') {
                            this.ruleForm.details = obj[o];
                            this.ro.details = true;
                            continue;
                        }
                        if (o == 'releasedate') {
                            this.ruleForm.releasedate = obj[o];
                            this.ro.releasedate = true;
                            continue;
                        }
                    }
                }
                // 获取用户信息
                this.$http.get(this.userTableName + '/session', {emulateJSON: true}).then(res => {
                    if (res.data.code == 0) {
                        var json = res.data.data;
                    }
                });
                this.$http.get('option/linetype/routetype', {emulateJSON: true}).then(res => {
                    if (res.data.code == 0) {
                        this.routetypeOptions = res.data.data;
                    }
                });
                this.traveltimeOptions = "一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,新年".split(',')
                this.traveldaysOptions = "3天及以下,4天至7天,8天至14天,14天至20天,20天以上".split(',')
                this.transportationOptions = "高铁,出租车,自行车,飞机,火车,汽车,徒步".split(',')
                this.$http.get('option/attractioninformation/attractionname', {emulateJSON: true}).then(res => {
                    if (res.data.code == 0) {
                        this.routeattractionOptions = res.data.data;
                    }
                });
            },

            // 多级联动参数
            // 多级联动参数
            info(id) {
                this.$http.get('routeplanning/detail/${id}', {emulateJSON: true}).then(res => {
                    if (res.data.code == 0) {
                        this.ruleForm = res.data.data;
                        this.ruleForm.routeattraction = this.ruleForm.routeattraction.split(",");
                    }
                });
            },
            // 提交
            onSubmit() {

                //更新跨表属性
                var crossuserid;
                var crossrefid;
                var crossoptnum;
                this.$refs["ruleForm"].validate(valid => {
                    if (valid) {
                        if (this.type == 'cross') {
                            var statusColumnName = localStorage.getItem('statusColumnName');
                            var statusColumnValue = localStorage.getItem('statusColumnValue');
                            if (statusColumnName && statusColumnName != '') {
                                var obj = JSON.parse(localStorage.getItem('crossObj'));
                                if (!statusColumnName.startsWith("[")) {
                                    for (var o in obj) {
                                        if (o == statusColumnName) {
                                            obj[o] = statusColumnValue;
                                        }
                                    }
                                    var table = localStorage.getItem('crossTable');
                                    this.$http.post(table + '/update', obj).then(res => {
                                    });
                                } else {
                                    crossuserid = Number(localStorage.getItem('userid'));
                                    crossrefid = obj['id'];
                                    crossoptnum = localStorage.getItem('statusColumnName');
                                    crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
                                }
                            }
                        }
                        if (crossrefid && crossuserid) {
                            this.ruleForm.crossuserid = crossuserid;
                            this.ruleForm.crossrefid = crossrefid;
                            var params = {
                                page: 1,
                                limit: 10,
                                crossuserid: crossuserid,
                                crossrefid: crossrefid,
                            }
                            this.$http.get('routeplanning/list', {
                                params: params
                            }).then(res => {
                                if (res.data.data.total >= crossoptnum) {
                                    this.$message({
                                        message: localStorage.getItem('tips'),
                                        type: 'success',
                                        duration: 1500,
                                    });
                                    return false;
                                } else {
                                    // 跨表计算


                                    this.ruleForm.routeattraction = this.ruleForm.routeattraction.join(",");
                                    this.$http.post('routeplanning/add', this.ruleForm).then(res => {
                                        if (res.data.code == 0) {
                                            this.$message({
                                                message: '操作成功',
                                                type: 'success',
                                                duration: 1500,
                                                onClose: () => {
                                                    this.$router.go(-1);
                                                }
                                            });
                                        } else {
                                            this.$message({
                                                message: res.data.msg,
                                                type: 'error',
                                                duration: 1500
                                            });
                                        }
                                    });
                                }
                            });
                        } else {


                            this.ruleForm.routeattraction = this.ruleForm.routeattraction.join(",");
                            this.$http.post('routeplanning/add', this.ruleForm).then(res => {
                                if (res.data.code == 0) {
                                    this.$message({
                                        message: '操作成功',
                                        type: 'success',
                                        duration: 1500,
                                        onClose: () => {
                                            this.$router.go(-1);
                                        }
                                    });
                                } else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error',
                                        duration: 1500
                                    });
                                }
                            });
                        }
                    }
                });
            },
            // 获取uuid
            getUUID() {
                return new Date().getTime();
            },
            // 返回
            back() {
                this.$router.go(-1);
            },
            lineimageUploadChange(fileUrls) {
                this.ruleForm.lineimage = fileUrls.replace(new RegExp(this.$config.baseUrl, "g"), "");
                ;
            },
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .el-date-editor.el-input {
        width: auto;
    }

    .add-update-preview .el-form-item /deep/ .el-form-item__label {
        padding: 0 10px 0 0;
        color: #666;
        font-weight: 500;
        width: 80px;
        font-size: 14px;
        line-height: 40px;
        text-align: right;
    }

    .add-update-preview .el-form-item /deep/ .el-form-item__content {
        margin-left: 80px;
    }

    .add-update-preview .el-input /deep/ .el-input__inner {
        border: 1px solid #00adb5;
        border-radius: 4px;
        padding: 0 12px;
        outline: none;
        color: #666;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 400px;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .el-select /deep/ .el-input__inner {
        border: 1px solid #00adb5;
        border-radius: 4px;
        padding: 0 10px;
        outline: none;
        color: #666;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 200px;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .el-date-editor /deep/ .el-input__inner {
        border: 1px solid #00adb5;
        border-radius: 4px;
        padding: 0 10px 0 30px;
        outline: none;
        color: #666;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 200px;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview /deep/ .el-upload--picture-card {
        background: transparent;
        border: 0;
        border-radius: 0;
        width: auto;
        height: auto;
        line-height: initial;
        vertical-align: middle;
    }

    .add-update-preview /deep/ .upload .upload-img {
        border: 1px solid #00adb5;
        cursor: pointer;
        border-radius: 6px;
        color: #00adb5;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 200px;
        font-size: 32px;
        line-height: 120px;
        text-align: center;
        height: auto;
    }

    .add-update-preview /deep/ .el-upload-list .el-upload-list__item {
        border: 1px solid #00adb5;
        cursor: pointer;
        border-radius: 6px;
        color: #00adb5;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 200px;
        font-size: 32px;
        line-height: 120px;
        text-align: center;
        height: auto;
    }

    .add-update-preview /deep/ .el-upload .el-icon-plus {
        border: 1px solid #00adb5;
        cursor: pointer;
        border-radius: 6px;
        color: #00adb5;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 200px;
        font-size: 32px;
        line-height: 120px;
        text-align: center;
        height: auto;
    }

    .add-update-preview .el-textarea /deep/ .el-textarea__inner {
        border: 1px solid #00adb5;
        border-radius: 4px;
        padding: 12px;
        outline: none;
        color: #666;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 400px;
        font-size: 14px;
        min-height: 120px;
    }
</style>
